<template>
	<view class="app_top"><uni-nav-bar :border="false" @clickLeft="app_back" left-icon="left" title="会议提醒"></uni-nav-bar></view>
	<!-- 灰色背景 -->
	<scroll-view scroll-y="true" class="yibai">
		<view class="app_hsbj">
			<!-- 灰色消息 -->
			<view class="app_grey"  v-for="(item, index) in list" :key="item.id">
				<!-- 消息 -->
				<!-- 时间 -->
				<view class="app_grey_time">
					<text>{{ item.time }}</text>
				</view>
				<view class="app_xioaxi">
					<!-- 圆 -->
					<view class="grey_yuan"><image src="../../static/会议.png" mode=""></image></view>
					<!-- 白色bj -->
					<view class="grey_white">
						<view class="triangle"></view>
						<view class="grey_white_top">
							<view>
								<text>会议通知</text>
							</view>
							<view>
								<text>{{ item.content }}</text>
							</view>
						</view>
						<view class="grey_white_bottom" @click="go_meeting_details(item)"><text>去办理</text></view>
					</view>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
import { reactive, toRefs, computed, onMounted, onBeforeUpdate, onUpdated } from 'vue';
import { useStore, mapState } from 'vuex';
import http from '../../utils/http.js';
export default {
	setup() {
			const store = useStore();
		let data = reactive({
			//数据
			list:store.state.zhangxi.huiyi,
			// 返回我的消息
			app_back() {
				uni.navigateBack({
					delta: 1
				});
				http({
					url: '/zhangXi/addRead',
					method: 'POST',
					data: {
						name: '会议'
					}
				}).then(res => {
					if (res.data.code == 200) {
						console.log(res.data.data);
					}
				});
			},
			// 去会议详情
			go_meeting_details(v) {
				console.log(v);
				if(v.mun!=null){
					http({
						url: '/zhangXi/meetingJump',
						data: {
							num: v.mun
						}
					}).then(res => {
						if (res.data.code == 200) {
							store.commit('zengjiayu/setTododata', res.data.data[0]);
							uni.navigateTo({
								url: '/pages/todo_details/todo_details'
							});
						}
					});
				}else{
					console.log('没有流水号');
				}
			},
			add: () => store.commit('zhangxi/add2'),
		});
		onMounted(() => {
			data.add();
		});
		return { ...toRefs(data) };
	}
};
</script>

<style lang="scss">
page {
	height: 100%;
}

.yibai{
	height: 100%;
	background: rgb(242, 242, 242);
}
.app_top {
	width: 100%;
	position: fixed;
	top: 0;
	z-index: +1;
	.uniui-left {
		color: rgb(45, 140, 240) !important;
	}
}
.app_hsbj {
	background: rgb(242, 242, 242);
	box-sizing: border-box;
	padding: 50rpx 0;
	overflow: hidden;
}

.app_grey {
	margin: 50rpx 0;
	//  时间
	.app_grey_time {
		box-sizing: border-box;
		padding: 20rpx;
		text-align: center;
		font-size: 26rpx;
		color: #999;
	}

	.app_xioaxi {
		display: flex;
		justify-content: space-around;
		box-sizing: border-box;
		padding: 0 16rpx;
		// 圆形
		.grey_yuan {
			position: relative;
			margin: 0 10rpx 0 0;
			width: 88rpx;
			height: 88rpx;
			border-radius: 100px;
			line-height: 88rpx;
			text-align: center;
			font-size: 28rpx;
			color: #fff;
			background-image: linear-gradient(rgb(129, 187, 247), rgb(85, 170, 252));
			
			image {
				width: 88rpx;
				height: 88rpx;
			}
		}

		// 白色背景
		.grey_white {
			background: #fff;
			position: relative;
			width: 576rpx;
			border-radius: 20rpx;

			// 三角
			.triangle {
				position: absolute;
				top: 30rpx;
				left: -15rpx;
				width: 30rpx;
				height: 30rpx;
				background: #fff;
				transform: rotate(45deg);
			}
			.grey_white_top {
				margin: 20rpx;
				box-sizing: border-box;

				view:nth-child(1) {
					margin: 0 0 10rpx 0;
					font-size: 30rpx;
					color: #333;
				}

				view:nth-child(2) {
					line-height: 40rpx;
					font-size: 26rpx;
					color: #666;
				}
			}

			//去办理按钮
			.grey_white_bottom {
				text-align: center;
				box-sizing: border-box;
				padding: 20rpx;
				color: #2d8cf0;
				font-size: 26rpx;
				border-top: 1px solid rgb(242, 242, 242);
			}
		}
	}
}
</style>
